<template>
    <div id="app">
        <header class="header iconfont">
            <a @click="back" class="t-xiaoxi" v-html="icon"></a>
            <h1 class="t-title">{{title}}</h1>
            <router-link to="/search" class="t-sousuo">&#xe611;</router-link>
        </header>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: "app",
        data() {
            return {
                router: null
            }
        },
        computed: {
            icon() {
                return ['', '/'].includes(this.$route.fullPath) ? '&#xe627;' : '&#xe81e;';
            },
            title() {
                return this.$route.meta.title || "";
            }
        },
        methods:{
            back() {
                ['', '/'].includes(this.$route.fullPath) ? this.$router.push('/'): this.$router.go(-1);
            }
        }
    }
</script>
<style scoped>
    #app {
        padding:45px 0 ;
    }
    
    .header {
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        position: fixed;
        top: 0;
        z-index: 99999;
    }
    
    .header .t-xiaoxi, .header .t-sousuo {
        flex: none;
        border: 0;
        background: none;
        cursor: pointer;
        font-size: 20px;
    }
    
    .header .t-title {
        flex: .9;
        font-size: 18px;
        text-align: center;
    }
</style>
